<style type="text/css">
.s-txt {width:200px;}
.code-textarea {width:500px;height:200px;}
.pic-main {margin:0 0 0 0;width: 600px;}
.pic-main ul {width:600px;list-style:none;}
.pic-main li {float:left;width:200px;height:33px;text-align:center;line-height:33px}

.pic-size {height:150px;} 

.ico-top, .ico-btm {background: url("__THEME__/admin/image/ico_top_btm.gif") no-repeat scroll 0 0 transparent;height:14px;width:12px;}
.ico-top, .ico-btm {display: inline-block;vertical-align: middle;}
.ico-top {background-position: -12px 0;}
.ico-btm {background-position: -24px 0;}
.ico-top:hover {background-position: 0 0;}
.ico-btm:hover {background-position: -35px 0;}

.ico-close-small {
  background: url("__THEME__/image/del.png") no-repeat 0 0;width:18px;height:18px;
  display: inline-block;
  overflow: hidden;
  vertical-align: 0;
  background-position: 0 -26px;
  width: 9px;
  height: 8px;
  cursor: pointer;
  _vertical-align:3px;
  _background:url("__THEME__/image/del.gif") no-repeat 0 0;
}
a.ico-close-small:hover {
  background-position: 0 -82px;
  width: 9px;
  height: 8px;
  cursor: pointer;
  _vertical-align: 3px;
}
.ml8 {
  margin-left: 8px;
}
</style>

<php>$AdSpaceAction = $editPage ? 'doEditAdSpace' : 'doAddAdSpace';</php>
<form method="post" action="{:Addons::adminUrl($AdSpaceAction)}" enctype="multipart/form-data" autocomplete="off" onsubmit="return checkAdSpaceForm()">
  <div class="form2">
    <dl class="lineD">
      <dt><font color="red"> * </font>标题：</dt>
      <dd>
        <input type="text" class="s-txt" name="title" value="{$data.title}" />
      </dd>
    </dl>
    <dl class="lineD">
      <dt>位置：</dt>
      <dd>
        <select name="place">
          <php>!isset($data['place']) && $data['place'] = 0;</php>
          <volist name="placeArr" id="vo">
          <option value="{$vo.id}" <eq name="data.place" value="$vo.id">selected</eq>>{$vo.name}</option>
          </volist>
        </select>
      </dd>
    </dl>
    <dl class="lineD">
      <dt>是否有效：</dt>
      <dd>
        <php>!isset($data['is_active']) && $data['is_active'] = 1;</php>
        <label><input type="radio" name="is_active" value="1" <eq name="data.is_active" value="1">checked</eq> />是</label>
        <label><input type="radio" name="is_active" value="0" <eq name="data.is_active" value="0">checked</eq> />否</label>
      </dd>
    </dl>
    <dl class="lineD">
      <dt>广告类型：</dt>
      <dd>
        <php>if($editPage):</php>
          <switch name="data.display_type">
            <case value="1">HTML</case>
            <case value="2">代码</case>
            <case value="3">轮播</case>
          </switch>
          <input type="hidden" name="display_type" value="{$data['display_type']}" />
        <php>else:</php>
          <php>!isset($data['display_type']) && $data['display_type'] = 1;</php>
          <label><input type="radio" onclick="showDisplayType('html')" name="display_type" value="1" <eq name="data.display_type" value="1">checked</eq> />HTML</label>
          <label><input type="radio" onclick="showDisplayType('code')" name="display_type" value="2" <eq name="data.display_type" value="2">checked</eq> />代码</label>
          <label><input type="radio" onclick="showDisplayType('pic')" name="display_type" value="3" <eq name="data.display_type" value="3">checked</eq> />轮播</label>
        <php>endif;</php>
      </dd>
    </dl>
    <dl class="lineD" id="html_form" <neq name="data.display_type" value="1">style="display:none;"</neq>>
      <dt></dt>
      <dd>
        {:W('Editor',array('width'=>500,'height'=>'200','contentName'=>'html_form','value'=>$data['content']))} 
      </dd>
    </dl>
    <dl class="lineD" id="code_form" <neq name="data.display_type" value="2">style="display:none;"</neq>>
      <dt></dt>
      <dd>
        <textarea class="code-textarea" name="code_form">{$data.content}</textarea>
      </dd>
    </dl>
    <dl class="lineD" id="pic_form" <neq name="data.display_type" value="3">style="display:none;"</neq>>
      <dt></dt>
      <dd>
        <div class="pic-main" id="div_pic_list">
          <div>
            <ul>
              <li>图片地址</li>
              <li>链接地址</li>
              <li>操作</li>
            </ul>
          </div>
          <php>if(empty($data['content'])):</php>
          <div class="div_pic_1">
            <ul>
              <li style="height:200px;">
                <input type="file" name="attach" onchange="admin.upload(1, this)" urlquery="attach_type=ad_image&upload_type=image&thumb=1" />
                <div id="show_1"></div>
                <input type="hidden" name="banner[]" id="form_1" value="" />
              </li>
              <li style="height:200px;"><input type="text" name="bannerurl[]" class="s-txt" /></li>
              <li style="height:200px;"><a class="ico-top" href="javascript:;" onclick="movePic(1, 'up')"></a><a class="ico-btm ml8" href="javascript:;" onclick="movePic(1, 'down')"></a><a class="ico-close-small ml8" href="javascript:;" onclick="closePic(1)"></a></li>
            </ul>
          </div>
          <php>else:</php>
          <volist name="data.content" id="vo">
          <div class="div_pic_{$i}">
            <ul>
              <li style="height:200px;">
                <input type="file" name="attach" onchange="admin.upload({$i}, this)" urlquery="attach_type=ad_image&upload_type=image&thumb=1" />
                <div id="show_{$i}"><img class="pic-size" src="{$vo.bannerpic}"></div>
                <input type="hidden" name="banner[]" id="form_{$i}" value="{$vo.banner}" />
              </li>
              <li style="height:200px;"><input type="text" name="bannerurl[]" class="s-txt" value="{$vo.bannerurl}" /></li>
              <li style="height:200px;"><a class="ico-top" href="javascript:;" onclick="movePic({$i}, 'up')"></a><a class="ico-btm ml8" href="javascript:;" onclick="movePic({$i}, 'down')"></a><a class="ico-close-small ml8" href="javascript:;" onclick="closePic({$i})"></a></li>
            </ul>
          </div>
          </volist>
          <php>endif;</php>
        </div>
        <a stlyle="float:right;" href="javascript:;" onclick="addPic()">添加</a>
      </dd>
    </dl>
    <eq name="AdSpaceAction" value="doEditAdSpace">
      <input type="hidden" name="ad_id" value="{$data['ad_id']}" />
      <input type="hidden" name="jumpUrl" value="{:Addons::adminPage('config')}" />
    </eq>
    <div class="page_btm">
      <input type="submit" value="保存" class="btn_b" />
    </div>
  </div>
</form>

<script type="text/javascript">
/**
 * 显示类型相关表单内容
 * @param string type 表单类型，html/code/pic
 * @return void
 */
var showDisplayType = function(type)
{
  switch(type) {
    case 'html':
      $('#html_form').show();
      $('#code_form').hide();
      $('#pic_form').hide();
      break;
    case 'code':
      $('#html_form').hide();
      $('#code_form').show();
      $('#pic_form').hide();
      break;
    case 'pic':
      $('#html_form').hide();
      $('#code_form').hide();
      $('#pic_form').show();
      break;
  }
  return false;
}


var clickNum = $('#div_pic_list').children('div').length - 1;
/**
 * 添加轮循图片输入表单
 * @return void
 */
var addPic = function()
{
  var $pic = $('#div_pic_list');
  var max = 5;
  if($pic.children('div').length > max) {
    alert('最多只能添加'+max+'张图片');
    return false;
  }
  clickNum++;
  var divId = clickNum;
  var html = '<div class="div_pic_'+divId+'">\
              <li style="height:200px;">\
                <input type="file" name="attach" onchange="admin.upload('+divId+', this)" urlquery="attach_type=ad_image&upload_type=image&thumb=1" />\
                <div id="show_'+divId+'"></div>\
                <input type="hidden" name="banner[]" id="form_'+divId+'" value="" />\
              </li>\
              <li style="height:200px;"><input type="text" name="bannerurl[]" class="s-txt" /></li>\
              <li style="height:200px;"><a class="ico-top" href="javascript:;" onclick="movePic('+divId+',\'up\')"></a><a class="ico-btm ml8" href="javascript:;" onclick="movePic('+divId+',\'down\')"></a><a class="ico-close-small ml8" href="javascript:;" onclick="closePic('+divId+')"></a></li>\
              </div>';
  $pic.append(html);
  return false;
};
/**
 * 删除轮循图片输入表单
 * @param integer divId 表单ID
 * @return void
 */
var closePic = function(divId)
{
  $divPic = $('.div_pic_'+divId);
  $divPic.remove();
};
/**
 * 移动轮循图片输入表单
 * @param integer divId 表单ID
 * @param string type 移动类型，up or down
 * @return void
 */
var movePic = function(divId, type)
{
  $divPic = $('.div_pic_'+divId);
  var divLen = parseInt($divPic.prevAll('div').length);
  switch(type) {
    case 'up':
      divLen != 1 && $('#div_pic_list').children('div').eq(divLen - 1).before($divPic);
      break;
    case 'down':
      divLen != 5 && $('#div_pic_list').children('div').eq(divLen + 1).after($divPic);
      break;
  }
  return false;
};
/**
 * 轮循图片上传图片
 * @param object obj 点击DOM对象
 * @return void
 */
var uploadPic = function(obj, divId)
{
  var urlquery = $(obj).attr('urlquery');
  core.loadFile(THEME_URL+'/js/jquery.form.js', function() {
    var parentForm = document.createElement('form');
    parentForm.method = 'post';
    parentForm.action = U('widget/Upload/save')+'&'+urlquery;
    $(parentForm).html($(obj).clone());
    $(parentForm).ajaxSubmit({
      dataType: 'json',
      success: function(res) {
        $('#banner_hidden_'+divId).val(res.data.attach_id);
      }
    });
  });
};
/**
 * 验证表单数据正确性
 * @return boolean 数据是否正确
 */
var checkAdSpaceForm = function()
{
  // 判断标题数据正确性
  if($.trim($('input[name="title"]').val()) == '') {
    ui.error('标题不能为空');
    return false;
  }
  // 验证内容数据正确性
  var displayType = 0;
  if($('input[name="display_type"]').length == 1) {
    displayType = parseInt($('input[name="display_type"]').val());
  } else {
    $('input[name="display_type"]').each(function(i, n) {
      if($(this).attr('checked')) {
        displayType = parseInt($(this).val());
      }
    });
  }
  switch(displayType) {
    case 1:
      if($.trim(E.getData()) == '') {
        ui.error('HTML内容不能为空');
        return false;
      }
      break;
    case 2:
      if($.trim($('textarea[name="code_form"]').val()) == '') {
        ui.error('代码内容不能为空');
        return false;
      }
      break;
    case 3:
      var status = true;
      $('#div_pic_list').find('input').each(function(i, n) {
        if($(this).attr('name') == 'banner[]' || $(this).attr('name') == 'bannerurl[]') {
          if($.trim($(this).val()) == '') {
            status = false;
            return false;
          }
        }
      });
      if($('#div_pic_list > div').length < 2) {
        status = false;
      }
      if(!status) {
        ui.error('轮播内容不能为空');
        return false;
      }
      break;
  }

  return true;
};
</script>